<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="/resource/css/bootstrap-table.min.css" type="text/css">

<!-- Latest compiled and minified JavaScript -->
<script src="/resource/js/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="/resource/js/bootstrap-table-zh-CN.min.js"></script>

<div id="toolbar">
  <div class="btn-group ml-3" role="group" aria-label="Basic example">
      <button type="button" class="btn btn-info "
          onclick="AE()">添加</button>
      <button type="button" class="btn btn-danger "
          onclick="Del()">删除</button>
  </div>
</div>
<div class="modal fade bd-example-modal-lg" id="AEModal" tabindex="-1" aria-labelledby="myLargeModalLabel"
  aria-hidden="true" style="display: none;">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="AEModalLongTitle">编辑</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
          <form id="AEForm">
            <input name="id" id="aeid" type="hidden" >
            <div class="position-relative form-group">
              <label>名字</label>
              <input name="name" placeholder="名字" type="text" class="form-control">
            </div>
            <div class="position-relative form-group">
              <label>支付类型</label>
              <select name="payment" id="payment" class="form-control" data-style="btn-primary" >
                <option value="epay">epay</option>
                <!-- <option value="alpha">alpha</option> -->
              </select>
            </div>
            <div class="position-relative form-group">
              <label>回调地址</label>
              <input name="notify_domain" placeholder="回调地址" type="text" class="form-control">
            </div>
            <div class="position-relative form-group">
              <label>图标</label>
              <input name="icon" placeholder="图标" type="text" class="form-control">
            </div>
            <div class="position-relative form-group">
              <label>百分比手续费  结账计算方式=商品价格 + (商品价格 * 百分比手续费/100) + 固定手续费</label>
              <input name="handling_fee_percent" placeholder="百分比手续费" type="number" class="form-control">
            </div>
            <div class="position-relative form-group">
              <label>固定手续费  结账计算方式=商品价格 + (商品价格 * 百分比手续费/100) + 固定手续费</label>
              <input name="handling_fee_fixed" placeholder="固定手续费" type="number" class="form-control">
            </div>
            <div class="position-relative form-group">
              <label>是否启用</label>
              <div>
                <div class="custom-control custom-radio ">
                  <input name="enable" class="custom-control-input" id="radio1" type="radio" checked="" value="1">
                  <label class="custom-control-label" for="radio1">启用</label>
                </div>
                <div class="custom-control custom-radio ">
                  <input name="enable" class="custom-control-input" id="radio2" type="radio" value="-1">
                  <label class="custom-control-label" for="radio2">禁用</label>
                </div>
              </div>
             
            </div>
            
            <div class="position-relative form-group">
              <label>顺序</label>
              <input name="order_id" placeholder="顺序" type="number" class="form-control">
            </div>
            <div class="position-relative form-group">
              <label>数据</label>
              <textarea name="config" class="form-control" rows="8"></textarea>
            </div><div class="position-relative form-group">
              <label>描述</label>
              <textarea name="remarks" class="form-control" rows="3"></textarea>
            </div>
          </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="AEajax()">保存</button>
      </div>
    </div>
  </div>
</div>

<script>
  const $table = $('#table')
  $(function () {
    initTable()
  })

  //搜索
  function search() {
    $("#table").bootstrapTable('refresh');
  }
  //清除搜索
  function cleanSearch() {
    $("select[data-function='search']").each(function (i, domEle) {
      // 选择第一个选项
      $(this).val($(this).find('option:first').val());
    })
    $("input[data-function='search']").each(function (i, domEle) {
      $(domEle).val("")
    })
    $("#table").bootstrapTable('refresh');
  }

  //AE表单
  function AE(data) {
    $('#AEForm')[0].reset();
    if (data != null) {
        $("#AEModalLongTitle").text("编辑")
        $("#AEForm input[type='hidden'],#AEForm input[type='number'],#AEForm input[type='text'],#AEForm input[type='datetime-local'],#AEForm select,#AEForm textarea").each(function (i, v) {

            for (let key in data) {
                if (key == $(v).attr("name")) {
                    $(v).val(data[key])
                }
            }
        })

        $("#AEForm input[type='checkbox']").each(function (i, v) {
            for (let key in data) {
                if (key == $(v).attr("name")) {
                    if (data[key] == 1) {
                      $(v).attr("checked","true")
                    }else{
                      $(v).removeAttr("checked")
                    }
                }
            }
        })

        //单选默认值
        $("#AEForm input[type='radio']").each(function (i, v) {
          for (let key in data) {
            if (key == $(v).attr("name")) {
              $("#AEForm input:radio[name='"+key+"'][value='" + data[key] + "']").prop("checked", true)
            }
          }
        })
        
        
    } else {
        $("#AEModalLongTitle").text("添加")
        $("#aeid").val("")
        
    }
    $('#AEModal').modal('show')
  }

  //ae提交
  function AEajax() {
    let d = {}
    let t = $("#AEForm").serializeArray();
    $.each(t, function() {
        d[this.name] = this.value;
    });

    $.ajax({
        type: "POST",
        url: "/{{.setting.admin_path}}/payment/ae",
        data: d,
        dataType: "json",
        success: function(data) {
            if (data.code == 0) {
              notify('success', "保存成功")
            } else {
              notify('danger', data.message)
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log(errorThrown)
            notify('danger', errorThrown)
        },
        complete: function () {//不管成功还是失败 都会进这个函数
          $('#AEModal').modal('hide')
          $("#table").bootstrapTable('refresh');
        }
    });
  }

  //删除数据
  function Del() {
    let delData = $table.bootstrapTable('getSelections')
    if (delData.length == 0) {
      notify('danger', '请选择！')
      return
    }
    let ids = []
    delData.forEach(function(v, i) {
      ids.push(v.id)
    })

    $.ajax({
        type: "post",
        url: "/{{.setting.admin_path}}/payment/del",
        data: {'ids':ids},
        dataType: "json",
        success: function(data) {
          if (data.code == 0) {
            notify('success', "删除成功")
          } else {
            notify('danger', data.message)
          }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          notify('danger', errorThrown)
        },
        complete: function () {//不管成功还是失败 都会进这个函数
          $("#table").bootstrapTable('refresh');
        }
    });
    
  }


  //初始化表格
  function initTable() {
    $table.bootstrapTable({
      columns: [
        [
          {
            checkbox: true,
          }, {
            field: 'id',
            title: 'ID',
            width: 80,
          }, {
            field: 'name',
            title: '名称',
          }, {
            field: 'payment',
            title: '支付类型',
          }, {
            field: 'notify_domain',
            title: '回调地址',
          },{
            field: 'icon',
            title: '图标',
            visible:false,//隐藏
          },{
            field: 'handling_fee_percent',
            title: '百分比手续费',
          },{
            field: 'handling_fee_fixed',
            title: '固定手续费',
          },{
            field: 'enable',
            title: '是否启用',
            formatter: function (value, row, index) {
              if (row.enable == 1) {
                return `是`
              }
              return `否`;
            }
          },{
            field: 'order_id',
            title: '顺序',
          },{
            field: 'config',
            title: '数据',
            visible:false,//隐藏
          },{
            field: 'remarks',
            title: '描述',
            visible:false,//隐藏
          },{
            field: 'operate',
            title: '操作',
            width:120,
            events: {
              'click #edit': function (e, value, row, index) {
                AE(row)
              },
            },
            formatter: function (value, row, index) {
              return `
              <div class="btn-group" role="group" aria-label="Basic example">
                <button id="edit" type="button" class="btn btn-twitter btn-icon-only"><span class="btn-inner--icon"><i class="fas fa-edit"></i></span></button>
              </div>`;
            }
          }
        ]
      ], //列
      
      url: '/{{.setting.admin_path}}/payment',
      method: 'post', //请求方法
      dataType: 'json',//数据格式
      toolbar: '#toolbar',
      pagination: false, //是否显示页码
      showRefresh: true,  //显示刷新按钮
      showColumns: true, //是否显示列下拉列表按钮
      showFullscreen: true, //是否显示全屏按钮
      responseHandler: function (res) {  //response数据处理
        return {
          "rows": res.data.data
        };
      },

      //搜索
      queryParams: function (x) {

        $("select[data-function='search']").each(function (i, domEle) {
          x[$(domEle).attr("name")] = domEle.value
        })

        $("input[data-function='search']").each(function (i, domEle) {
          const bindingDomID = $(domEle).attr("data-select-binding")
          if (bindingDomID != undefined) {
            x[$(bindingDomID).attr("name")] = $(bindingDomID).val()
          }
          x[$(domEle).attr("name")] = domEle.value
        })


        return x
      },

    })
  }
</script>